<template>
  <div>
    <router-link :to="'/BillInfo/'+this.type">
      <div class="mui-card">
          <img class="let-img" :src="billboard.pic_s192" alt />
          <ul class="right-rank">
            <li v-for="(item,index) in SongList" :key="item.index">
              <span class="rank">{{index+1}}</span>
              <span>{{item.title}}</span>
              <span>{{item.author}}</span>
            </li>
          </ul>
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      billboard: {},
      SongList: []
    };
  },
  props: {
    type: String
  },
  created() {
    this.getbillList();
  },
  methods: {
    getbillList() {
      const BillUrl =
        this.HOST +
        `/v1/restserver/ting?method=baidu.ting.billboard.billList&size=3&type=${this.type}`;
      this.$axios
        .get(BillUrl)
        .then(res => {
          //榜单左侧的图片
            // const BillImg = {};
            // BillImg.pic_s192 = res.data.billboard.pic_s192;
            // this.BillImgList.push(BillImg);
            // console.log(this.BillImgList)
        //   this.BillImgList = res.data.billboard;
        // this.BillImgList.push(res.data.billboard)
        this.billboard=res.data.billboard
          console.log(this.BillImgList);
          //右侧歌曲排名
          this.SongList = res.data.song_list;
        })
        .catch();
    }
  }
};
</script>
<style scoped>
.let-img {
  width: 20%;
  float: left;
}
.right-rank {
  float: left;
  margin-left: 10px;
  width: 70%;
}
.right-rank li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* padding: 1%; */
}
.rank {
  color: red;
  font-weight: bolder;
  margin-right: 4px;
}
</style>